<template>
	<view class="container">
		<form @submit="submitForm">
			<!-- 菜品名称 -->
			<view class="form-item">
				<text class="label">菜品名称</text>
				<input v-model="formData.menuName" placeholder="请输入菜品名称" />
			</view>

			<!-- 上传图片 -->
			<view class="form-item">
				<text class="label">菜品图片</text>
				<view class="image-uploader">
					<view class="image-list">
						<view v-for="(item, index) in formData.menuImgList" :key="index" class="image-item">
							<image :src="item" mode="aspectFill"></image>
							<text class="delete-icon" @tap="deleteImage(index)">×</text>
						</view>
						<view class="upload-button" @tap="chooseImage" v-if="formData.menuImgList.length < 9">
							<text class="plus">+</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 价格 -->
			<view class="form-item" v-show="false">
				<text class="label">价格</text>
				<input v-model="formData.menuPrice" type="digit" placeholder="请输入价格" />
			</view>

			<!-- 用餐时间 -->
			<view class="form-item">
				<text class="label">用餐时间</text>
				<picker @change="bindTimeChange" :value="timeIndex" :range="timeArray">
					<view class="picker">{{timeArray[timeIndex]}}</view>
				</picker>
			</view>

			<!-- 菜品类型 -->
			<view class="form-item" v-show="false">
				<text class="label">菜品类型</text>
				<picker @change="bindTypeChange" :value="typeIndex" :range="typeArray">
					<view class="picker">{{typeArray[typeIndex]}}</view>
				</picker>
			</view>

			<!-- 标签 -->
			<view class="form-item" v-show="false">
				<text class="label">标签</text>
				<view class="tag-container">
					<view class="tag-list">
						<view class="tag" v-for="(item, index) in formData.menuTag" :key="index">
							{{item}}
							<text class="delete-tag" @tap="deleteTag(index)">×</text>
						</view>
					</view>
					<input class="tag-input" v-model="newTag" placeholder="输入标签后点击添加" @confirm="addTag" />
					<button class="add-tag-btn" size="mini" @tap="addTag">添加</button>
				</view>
			</view>

			<!-- 食材 -->
			<view class="form-item">
				<text class="label">制作步骤</text>
				<textarea v-model="formData.menuMaterials" placeholder="请输入制作步骤"></textarea>
			</view>

			<!-- 推荐搭配 -->
			<view class="form-item" v-show="false">
				<text class="label">推荐搭配</text>
				<input v-model="formData.menuComm" placeholder="请输入推荐搭配" />
			</view>

			<!-- 口味 -->
			<view class="form-item">
				<text class="label">口味</text>
				<picker @change="bindFlavorChange" :value="flavorIndex" :range="flavorArray">
					<view class="picker">{{flavorArray[flavorIndex]}}</view>
				</picker>
			</view>

			<!-- 热度 -->
			<view class="form-item">
				<text class="label">热度</text>
				<input v-model="formData.menuHot" type="number" placeholder="请输入热度" />
			</view>

			<!-- 提交按钮 -->
			<view class="form-item submit-area">
				<button @tap="submitForm" type="primary">提交菜谱</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					menuName: '',
					menuImgList: [],
					menuPrice: '',
					menuTag: [],
					menuMaterials: '',
					menuComm: '',
					menuHot: ''
				},
				records: [], // 添加这一行
			
				timeArray: ['早餐', '午餐', '晚餐'],
				timeIndex: 0,
				typeArray: ['荤菜菜谱', '素菜菜谱', '汤类', '主食'],
				typeIndex: 0,
				flavorArray: ['清淡', '偏甜', '偏辣'],
				flavorIndex: 0,
				newTag: ''
			}
		},
		// 页面加载时获取数据
		onLoad() {
			this.getMenuData()
		},
		methods: {
			// 获取菜单数据
			async getMenuData() {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					const response = await uni.request({
						url: 'http://127.0.0.1:3000/getMenuList',
						method: 'GET',
						data: {
							page: 1,
							limit: 10
						}
					})

					// 假设返回的数据在 response.data.data[0] 中
					const menuData = response[1].data.data[0]

					// 设置表单数据
					this.formData = {
						menuName: menuData.menuName || '',
						menuImgList: menuData.menuImgList || [],
						menuPrice: menuData.menuPrice || '',
						menuTag: menuData.menuTag || [],
						menuMaterials: menuData.menuMaterials || '',
						menuComm: menuData.menuComm || '',
						menuHot: menuData.menuHot || ''
					}

					// 设置选择器索引
					this.timeIndex = this.timeArray.indexOf(menuData.menuTime)
					this.typeIndex = this.typeArray.indexOf(menuData.menuType)
					this.flavorIndex = this.flavorArray.indexOf(menuData.menuFlavor)

					uni.hideLoading()
				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					})
					console.error('获取数据失败:', error)
				}
			},
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.formData.menuImgList.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.menuImgList = [...this.formData.menuImgList, ...res.tempFilePaths]
					}
				})
			},

			// 删除图片
			deleteImage(index) {
				this.formData.menuImgList.splice(index, 1)
			},

			// 用餐时间选择
			bindTimeChange(e) {
				this.timeIndex = Number(e.detail.value)
				this.formData.menuTime = this.timeArray[this.timeIndex]
			},

			// 菜品类型选择
			bindTypeChange(e) {
				this.typeIndex = Number(e.detail.value)
				this.formData.menuType = this.typeArray[this.typeIndex]
			},

			// 口味选择
			bindFlavorChange(e) {
				this.flavorIndex = Number(e.detail.value)
				this.formData.menuFlavor = this.flavorArray[this.flavorIndex]
			},

			// 添加标签
			addTag() {
				if (!this.newTag.trim()) return
				this.formData.menuTag.push(this.newTag.trim())
				this.newTag = ''
			},

			// 删除标签
			deleteTag(index) {
				this.formData.menuTag.splice(index, 1)
			},

			// 修改提交表单方法
			async submitForm() {
				// 表单验证
				if (!this.formData.menuName) {
					uni.showToast({
						title: '请输入菜品名称',
						icon: 'none'
					})
					return
				}

				if (this.formData.menuImgList.length === 0) {
					uni.showToast({
						title: '请至少上传一张图片',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: '提交成功',
					icon: 'success',
					duration: 2000
				})
				// 创建新记录
				const newRecord = {
					menuName: this.formData.menuName,
					mealTime: this.timeArray[this.timeIndex],
					submitTime: new Date().toLocaleString(),
					id: Date.now().toString() // 唯一ID
				}
				// 添加到记录列表
				this.records.unshift(newRecord)
				
				// 保存到本地存储
				try {
					console.log(111111111111,this.records);
					uni.setStorageSync('meals', JSON.stringify(this.records))
					
					
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					})
				} catch (e) {
					console.error('保存记录失败:', e)
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}

			
			},
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background: #f8f8f8;
	}

	.form-item {
		background: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	input,
	textarea {
		width: 100%;
		padding: 10rpx;
		font-size: 28rpx;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
	}

	textarea {
		height: 200rpx;
	}

	.picker {
		padding: 10rpx;
		border: 1rpx solid #eee;
		border-radius: 6rpx;
	}

	.image-uploader {
		padding: 10rpx 0;
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.image-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
	}

	.image-item image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.delete-icon {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		border-radius: 50%;
	}

	.upload-button {
		width: 200rpx;
		height: 200rpx;
		border: 1rpx dashed #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 6rpx;
	}

	.plus {
		font-size: 60rpx;
		color: #999;
	}

	.tag-container {
		margin-top: 10rpx;
	}

	.tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		margin-bottom: 10rpx;
	}

	.tag {
		background: #e8f0fe;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #1976d2;
		display: flex;
		align-items: center;
	}

	.delete-tag {
		margin-left: 10rpx;
		color: #666;
	}

	.tag-input {
		width: 70%;
		display: inline-block;
	}

	.add-tag-btn {
		margin-left: 20rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.submit-area {
		margin-top: 40rpx;
		font-size: 16px;
	}
</style>